MediaWiki:Gadget-Cardtable.css
Revision as of 22:12, 4 December 2019 by Deltaneos (talk | contribs) (Changing Link and Ritual colours. (Making the light colour less like Fusion.) The dark colours are currently used on yugioh-card.com's Forbidden and Limited lists. The light colour was used for Ritual Monsters on older Forbidden and Limited lists.)
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
.card-table {
border: 5px solid #666;
border-radius: 9px;
padding: .36em;
margin-top: 5px;
}
.card-table::after {
content: '';
clear: both;
display: table;
}
.card-table .heading {
display: flex;
align-items: center;
text-align: center;
font-weight: bold;
margin-bottom: .2em;
border-radius: 3px;
color: #000;
font-size: 1.5em;
line-height: 1.5;
min-height: 1.9em;
padding: .3em;
}
.card-table .heading > div {
margin-left: auto;
margin-right: auto;
}
.card-table .heading sup {
vertical-align: baseline;
font-size: inherit;
}
.card-table .heading sup.reference {
vertical-align: super;
font-size: smaller;
}
.card-table .heading sup::after {
content: ' Error:\20 Invalid tag in name ';
color: #F00;
font-size: smaller;
}
.card-table .heading sup.reference::after {
display: none;
}
.card-table .imagecolumn {
text-align: center;
}
.card-table .imagecolumn .tabbernav {
text-align: left;
}
.card-table .imagecolumn .tabbertab p {
margin: 0;
}
@media screen and (min-width: 768px) {
.card-table-columns {
display: table;
width: 100%;
}
.card-table .imagecolumn,
.card-table .infocolumn {
display: table-cell;
vertical-align: top;
}
.card-table .infocolumn {
width: 100%;
}
}
.card-table .innertable {
border-spacing: 4px;
width: 100%;
}
.card-table .innertable th {
width: 10em;
}
.card-table td > p:only-of-type {
margin: 0;
}
.card-table .lore {
box-sizing: border-box;
display: block;
margin: 5px;
padding: 5px;
text-align: left;
background-color: #FFF;
border-width: 3px;
border-style: solid;
border-radius: 3px;
width: 100%;
}
.anime-card .lore {
border-spacing: 0;
}
.pendulum-card .lore {
padding: 0;
}
.lorebox--pendulum {
border-color: inherit;
}
.lorebox--pendulum > div {
display: table-cell;
}
.lorebox + .lorebox {
border-top-style: solid;
border-color: inherit;
border-width: inherit;
padding: 5px;
}
.lorebox-pendulum_scale {
padding: 0 5px;
text-align: center;
vertical-align: middle;
}
.lorebox-pendulum_scale::before {
content: '';
display: block;
width: 20px;
height: 15px;
margin-top: 5px;
background-image: url('https://ms.yugipedia.com/thumb/4/48/Pendulum_Scales.png/40px-Pendulum_Scales.png');
background-repeat: no-repeat;
}
.lorebox-pendulum_scale:last-child::before {
background-position: top right;
}
.lorebox--pendulum .lorebox-lore {
border-style: none solid;
border-color: inherit;
border-width: 3px;
padding: 5px;
vertical-align: top;
width: 100%;
}
.lorebox-stats {
border-top: 1px solid #aaa;
}
.skin-oasis .lorebox-stats {
text-align: right;
}
.lorebox-stats:only-child {
border-top: none;
}
/* Deprecated classes. Remove when no longer used. */
.main_lore {
padding: 5px;
}
.pendulum_lore {
border-color: inherit;
}
.pendulum_lore > div {
display: table-cell;
}
.pendulum_lore + .main_lore {
border-top-style: solid;
border-color: inherit;
border-width: inherit;
}
.pendulum_scale-left, .pendulum_scale-right {
padding: 0 5px;
text-align: center;
vertical-align: middle;
}
.pendulum_scale-left::before, .pendulum_scale-right::before {
content: '';
display: block;
width: 20px;
height: 15px;
margin-top: 5px;
background-image: url('https://ms.yugipedia.com/thumb/4/48/Pendulum_Scales.png/40px-Pendulum_Scales.png');
background-repeat: no-repeat;
}
.pendulum_scale-right::before {
background-position: top right;
}
.pendulum_effect {
border-style: none solid;
border-color: inherit;
border-width: 3px;
padding: 5px;
vertical-align: top;
width: 100%;
}
/* End of deprecated classes */
.card-table .lorelinks {
text-align: center;
font-style: normal;
}
.card-table .abilitydesc dt, .card-table .lore dt {
font-weight: normal;
}
.card-table .abilitydesc dd, .card-table .lore dd {
margin-left: 1em;
}
.card-table .hcomma, .card-table .hslash,
.card-table .hplus, .card-table .hminus {
display: inline-block;
}
.card-table .above, .card-table .below {
text-align: center;
vertical-align: middle;
}
.card-table .curr {
display: inline-block;
}
.card-table .prev {
float: left;
width: auto;
}
.card-table .next {
float: right;
width: auto;
}
.card-table .prev::before { content: "\2190"; }
.card-table .next::after { content: "\2192"; }
.card-table .chronology .quotes::before,
.card-table .chronology .quotes::after { content: '"'; }
.card-table .chronology[lang="de"] .quotes::before { content: '„'; }
.card-table .chronology[lang="de"] .quotes::after { content: '“'; }
.card-table .chronology[lang="ja"] .quotes::before { content: '「'; }
.card-table .chronology[lang="ja"] .quotes::after { content: '」'; }
/* Fix a wrapping problem */
.card-table .hlist.hslash li, .card-table .hlist.hslash dd,
.card-table .hlist.hplus li, .card-table .hlist.hplus dd,
.card-table .hlist.hminus li, .card-table .hlist.hminus dd {
display: inline-block;
}
.card-table .hlist.hslash li::after, .card-table .hlist.hslash dd::after { content: ' /\a0'; }
.card-table .hlist.hplus li::after, .card-table .hlist.hplus dd::after { content: ' +\a0'; }
.card-table .hlist.hminus li::after, .card-table .hlist.hminus dd::after { content: ' -\a0'; }
.card-table .hlist.hslash li:last-child::after,
.card-table .hlist.hslash dd:last-child::after,
.card-table .hlist.hplus li:last-child::after,
.card-table .hlist.hplus dd:last-child::after,
.card-table .hlist.hminus li:last-child::after,
.card-table .hlist.hminus dd:last-child::after {
content: none;
}
.card-table-types ul {
display: inline-block;
}
/* Separators used in Japanese and Chinese Types sections */
.card-table-types.hslash[lang="ja"] li::after { content: '/'; }
.card-table-types[lang="ja"] li:first-of-type::after { content: '・'; }
.card-table-types[lang="zh"] li:first-of-type::after { content: '\a0·\a0 '; }
.card-table-types[lang="ja"] li:first-of-type a::after,
.card-table-types[lang="zh"] li:first-of-type a::after { content: '族'; }
/* Card type-based coloring */
.blank-card { background-color: #F9F9F9; }
.blank-card .heading { background-color: #F2F2F2; }
.blank-card .lore { border-color: #F2F2F2; }
.normal-card,
.yellow-card { background-color: #FEFF99; }
.normal-card .heading,
.yellow-card .heading { background-color: #FDE68A; }
.normal-card .lore,
.yellow-card .lore { border-color: #FDE68A; }
.normal-card .lorebox--main .lorebox-lore { font-style: italic; }
.normal-card .lorebox--main :lang(ja),
.normal-card .lorebox--main :lang(ja-Latn),
.normal-card .lorebox--main :lang(ko),
.normal-card .lorebox--main :lang(zh) { font-style: normal; }
/* Deprecated. Remove later. */
.normal-card .main_lore { font-style: italic; }
.normal-card .main_lore[lang="ja"],
.normal-card .main_lore[lang="ja-Latn"],
.normal-card .main_lore[lang="zh"],
.normal-card .main_lore[lang="ko"] { font-style: normal; }
/* End of deprecated. */
.effect-card { background-color: #FDB; }
.effect-card .heading { background-color: #FF8B53; }
.effect-card .lore { border-color: #FF8B53; }
.ritual-card,
.blue-card { background-color: #9DB5CC; }
.ritual-card .heading,
.blue-card .heading { background-color: #538DD5; }
.ritual-card .lore,
.blue-card .lore { border-color: #538DD5; }
.link-card { background-color: #9DB5CC; }
.link-card .heading { background-color: #538DD5; }
.link-card .lore { border-color: #538DD5; }
.cardtable-link .cardtable-header,
.link-card .heading {
background-image: url('https://ms.yugipedia.com/thumb/7/73/Link_Monster_pattern.png/77px-Link_Monster_pattern.png');
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
.red-card { background-color: #FC9; }
.red-card .heading { background-color: #F00; }
.red-card .lore { border-color: #F00; }
.fusion-card { background-color: #CDC0DA; }
.fusion-card .heading { background-color: #A086B7; }
.fusion-card .lore { border-color: #A086B7; }
.synchro-card { background-color: #F2F2F2; }
.synchro-card .heading { background-color: #CCC; }
.synchro-card .lore { border-color: #CCC; }
.darksynchro-card { background-color: #B2BEB5; }
.darksynchro-card .heading { background-color: #555; color: #FFF; }
.darksynchro-card .lore { border-color: #555; }
.darksynchro-card .lorerule { color: #808080; }
.xyz-card { background-color: #BFBFBF; }
.xyz-card .heading { background-color: #000; color: #FFF; }
.xyz-card .lore { border-color: #000; }
.pendulum-card { /* http://www.colorzilla.com/gradient-editor/#ffffff+35,d7e3bd+65&0+35,1+65;Custom */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d7e3bd',GradientType=0 )"; /* IE8-9 */
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* W3C */
}
.token-card { background-color: #C0C0C0; }
.token-card .heading { background-color: #828E85; }
.token-card .lore { border-color: #828E85; }
.spell-card { background-color: #D7E3BD; }
.spell-card .heading { background-color: #1D9E74; color: #FFF; }
.spell-card .lore { border-color: #1D9E74; }
.trap-card { background-color: #E5B7B7; }
.trap-card .heading { background-color: #BC5A84; color: #FFF; }
.trap-card .lore { border-color: #BC5A84; }
.skill-card { background: #c2c5d9; }
.skill-card .heading {
background-color: #1B7DBC;
background: linear-gradient(to right, #2290D6, #01559B) content-box, linear-gradient(#60A9C4,#0F517A) padding-box;
color: #FFF;
text-shadow: 1px 1px 0 #000;
}
.skill-card .lore { border-color: #1B7DBC; }
.tip-card { background: #ffd; }
.tip-card .heading { background: #800080; color: #fff; }
.tip-card .lore { border-color: #800080; }
.strategy-card { background: #eee; }
.strategy-card .heading { background: #66f; color: #fff; }
.strategy-card .lore { border-color: #66f; }
.bam.divine-card { background-color: #6F6F6F; color: #ECD6B6; }
.bam.divine-card th a,
.bam.divine-card .below a,
.bam.divine-card td p a,
.bam.divine-card td>a { color: #FFDB95; }
.bam.divine-card .heading { background-color: #000; color: #ECD6B6; }
.bam.divine-card .lore { border-color: #FFC351; background-color: #ECD6B6 !important; color: #000; }
.bam.fusion-card .heading { background-color: #727CC6; color: #FFF; }
.bam.fusion-card .lore { border-color: #727CC6; }
.bam .lore dt::before { content: '- '; }
.bam .lore dd { margin-left: 0; }
.ddm-card { background-color: #F2F2F2; }
.ddm-card .heading { background-color: #E9D66B; }
.ddm-card .lore { border-color: #E9D66B; }
.ddm-beast-card .heading { background-color: #393; }
.ddm-beast-card .lore { border-color: #393; }
.ddm-dragon-card .heading { background-color: #F00; }
.ddm-dragon-card .lore { border-color: #F00; }
.ddm-spellcaster-card .heading { background-color: #CCC; }
.ddm-spellcaster-card .lore { border-color: #CCC; }
.ddm-warrior-card .heading { background-color: #66F; }
.ddm-warrior-card .lore { border-color: #66F; }
.ddm-zombie-card .heading { background-color: #FF0; }
.ddm-zombie-card .lore { border-color: #FF0; }
.ddm-diemaster-card .heading,
.ddm-dungeonmaster-card .heading,
.ddm-monsterlord-card .heading { background-color: #000; color: #FFF; }
.ddm-diemaster-card .lore,
.ddm-dungeonmaster-card .lore,
.ddm-monsterlord-card .lore { border-color: #000; }
.ddm-item-card .heading { background-color: #555; color: #FFF; }
.ddm-item-card .lore { border-color: #555; }
.earlydm-card { background-color: #E9E9E9; }
.earlydm-card .heading { background-color: #C0C0C0; color: #000080; }
.earlydm-card .lore { border-color: #C0C0C0; }
.bandai-card { background-color: #FAF0BE; }
.bandai-card .heading { background-color: #000; color: #FFF; }
.bandai-card .lore { border-color: #F7E98E; }
.bandai-sealdass-card { background-color: #EEE; }
.bandai-sealdass-card .heading { background-color: #FAF0BE; }
.bandai-sealdass-card .stars { color: #D4AF37; font-weight: bold; font-size: 110%; }
.cm-card { background-color: #FFFACD; }
.cm-card .heading { background-color: #F5FADC; }
.cm-card .lore { border-color: #F5FADC; }
.cm2-card { background-color: #F0F0F0; }
.cm2-card .heading { background-color: #808080; color: #FFF; }
.cm2-card .lore { border-color: #808080; }
.mcbb-card { background-color: #C0C0C0; }
.mcbb-card .heading {
background-color: #837A6A;
color: #FFF;
text-shadow: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000,
-1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, 1px 1px 0 #000;
}
.mcbb-card .lore { border-color: #808080; }
.mcbb-card .abilitydesc {
color: #A4CDF6;
text-shadow: 0 -1px 0 #00F, 0 1px 0 #00F, -1px 0 0 #00F, 1px 0 0 #00F,
-1px -1px 0 #00F, -1px 1px 0 #00F, 1px -1px 0 #00F, 1px 1px 0 #00F;
}
.mcbb-card th[scope=row] {
color: #FFF;
text-shadow: 0 -1px 0 #D56272, 0 1px 0 #D56272, -1px 0 0 #D56272, 1px 0 0 #D56272,
-1px -1px 0 #D56272, -1px 1px 0 #D56272, 1px -1px 0 #D56272, 1px 1px 0 #D56272;
}
.manga-card { background-color: #FFF; }
.manga-card .heading { background-color: #EEE; }
.manga-card .lore { border-color: #EEE; }
.toei-card { background-color: #FFF; }
.toei-card .heading { background-color: #EEE; }
.toei-card .lore { border-color: #EEE; }
.toei-card .stars { color: #F00; }
.toei-card.white .heading { background-color: #F2F2F2; }
.toei-card.white .lore { border-color: #F2F2F2; }
.toei-card.black .heading { background-color: #000; color: #FFF; }
.toei-card.black .lore { border-color: #000; }
.toei-card.red .heading { background-color: #F00; }
.toei-card.red .lore { border-color: #F00; }
.toei-card.yellow .heading { background-color: #FF0; }
.toei-card.yellow .lore { border-color: #FF0; }
.toei-card.blue .heading { background-color: #00F; color: #FFF; }
.toei-card.blue .lore { border-color: #00F; }
.toei-card.green .heading { background-color: #0F0; color: #FFF; }
.toei-card.green .lore { border-color: #0F0; }
.toei-card.purple .heading { background-color: #800080; color: #FFF; }
.toei-card.purple .lore { border-color: #800080; }
.toei-card.brown .heading { background-color: #964B00; color: #FFF; }
.toei-card.brown .lore { border-color: #964B00; }
/* {{Card table set}} styles */
.cts td[title] {
white-space: nowrap;
}
.cts tbody td:nth-child(3),
.cts :lang(fr),
.cts :lang(de),
.cts :lang(it),
.cts :lang(pt),
.cts :lang(es) {
font-style: italic;
}
/* icon for official card database links */
.cardtableofficialdblinks {
list-style-image: url('https://yugipedia.com/wiki/Special:Redirect/file/Official_card_database_favicon.png');
}