MediaWiki:Cardtable.css

.card-table { border: 5px solid #666; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; padding: .36em; margin-top: 5px; } .card-table::after { content: ''; clear: both; display: table; } .card-table .heading { text-align: center; font-weight: bold; margin-bottom: .2em; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 1.5em; line-height: 1.5; min-height: 1.9em; padding: .6em .3em 0; } .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 { display: table-cell; text-align: center; width: 200px; } .card-table .imagecolumn.column300 { width: 300px; } .card-table .imagecolumn .tabbernav { text-align: left; } .card-table .imagecolumn .tabbertab p { margin: 0; } .card-table .infocolumn { display: table-cell; width: 100%; vertical-align: top; } .card-table .innertable { border-spacing: 4px; width: 100%; } .card-table .innertable th { width: 10em; }

.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; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; width: 100%; } .anime-card .lore { border-spacing: 0; }

.main_lore { padding: 5px; }

.pendulum-card .lore { padding: 0; } .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: url('http://img3.wikia.nocookie.net/__cb20140603103842/yugioh/images/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%; }

.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: ' /\00a0'; } .card-table .hlist.hplus li::after, .card-table .hlist.hplus  dd::after { content: ' +\00a0'; } .card-table .hlist.hminus li::after, .card-table .hlist.hminus dd::after { content: ' -\00a0'; }

.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; }

/* 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 .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; }

.effect-card                 { background-color: #FDB; } .effect-card .heading        { background-color: #FF8B53; } .effect-card .lore           { border-color: #FF8B53; }

.ritual-card, .blue-card                   { background-color: #CCC0D8; } .ritual-card .heading, .blue-card .heading          { background-color: #66F; } .ritual-card .lore, .blue-card .lore             { border-color: #66F; }

.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 */ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtcGVuZHVsdW0iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgPHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiNGRkZGRkYiIHN0b3Atb3BhY2l0eT0iMCIvPg0KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjRDdFM0JEIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgPC9saW5lYXJHcmFkaWVudD4NCiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXBlbmR1bHVtKSIgLz4NCjwvc3ZnPg==); /* IE9 SVG, needs conditional override of 'filter' to 'none' */ /* the above is a base64-encoded version of the following SVG (and so should be edited by changing the SVG and re-encoding)

      

*/ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(35%,rgba(255,255,255,0)), color-stop(65%,#D7E3BD)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* Chrome10+,Safari5.1+ */ background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* FF3.6+ */ background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* IE10+ */ background-image: -o-linear-gradient(top, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, rgba(255,255,255,0) 35%, #D7E3BD 65%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d7e3bd',GradientType=0 ); /* IE6-8 */ }

.token-card                  { background-color: #828E85; } .token-card .heading         { background-color: #C0C0C0; } .token-card .lore            { border-color: #C0C0C0; }

.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; }

.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: #0F0; } .ddm-beast-card .lore        { border-color: #0F0; }

.ddm-dark-card .heading      { background-color: #808080; color: #FFF; } .ddm-dark-card .lore         { border-color: #808080; }

.ddm-dragon-card .heading    { background-color: #F00; } .ddm-dragon-card .lore       { border-color: #F00; }

.ddm-invincible-card .heading { background-color: #FFBF00; } .ddm-invincible-card .lore   { border-color: #FFBF00; }

.ddm-spellcaster-card .heading { background-color: #FFF; } .ddm-spellcaster-card .lore  { border-color: #CCC; }

.ddm-undead-card .heading, .ddm-zombie-card .heading    { background-color: #FF0; } .ddm-undead-card .lore, .ddm-zombie-card .lore       { border-color: #FF0; }

.ddm-warrior-card .heading   { background-color: #66F; } .ddm-warrior-card .lore      { border-color: #66F; }

.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; }

/* styles */ .cts tbody td:nth-child(3), .cts :lang(fr), .cts :lang(de), .cts :lang(it), .cts :lang(pt), .cts :lang(es) { font-style:italic; }

/* (old) cardtable styles

when updating these styles, also update those at User:Dinoguy1000/cardtable.css table.cardtable { width: 100%; margin: 0.3em auto; background: #f9f9f9; border: 1px solid #aaa; border-collapse: collapse; } .cardtable th, .cardtable td { border: 1px solid #aaa; padding: 0.2em; } .cardtable th { text-align: center; } .cardtable .cardtable-header { font-size: 1.5em; line-height: 1.5em; } .cardtable .cardtable-cardimage { padding: 1px; vertical-align: top; } .cardtable .cardtablerowheader { text-align: left; } .cardtable .cardtablespanrow {  /* try forcing the image cell to least possible width, since most */ width: 100%;                /* card pages will have at least one collapsing data section      */ text-align: center; } .cardtable :lang(ja) { font-size: 11pt; font-family: 'ms pgothic'; } .cardtable :lang(ko) { font-size: 11pt; font-family: dotum; } .cardtable :lang(zh) { font-size: 11pt; font-family: pmingliu; } .cardtable .cardtable-header :lang(ja), .cardtable .cardtable-header :lang(ko), .cardtable .cardtable-header :lang(zh) { /* future-proofing - there aren't any cards premiering in the OCG via the TC prints yet, but who knows what may happen */ font-size: 1em; } .cardtable .sysop-show { /* only used for the "check translation" links for the card names */ float: right; } .cardtable .cardtable-dblinks.hlist { /* database links */ display: inline-block; } .cardtable .cardtable-flag { float: left; text-align: left; width: 6em; } .cardtable .cardtable-categories { font-size: 88%; text-align: left; }

/* try to "reset" the Navbox styles */ .cardtable .navbox-title, .cardtable table.navbox th { padding-left: 1em; padding-right: 1em; } .cardtable .navbox th, .cardtable .navbox td { border: none; }

/* styles for the statuses table */ table.cardtablestatuses { margin: auto; background: #f9f9f9; border: 1px solid #aaa; border-collapse: collapse; } .cardtablestatuses th, .cardtablestatuses td { border: 1px solid #aaa; padding: 0.2em; text-align: center; width: 12.5%; } .cardtablestatuses th { background: #f2f2f2; } .cardtablestatuses th.cardtablestatusesgroupheader { background: #000; color: #FFF; font-size: 1.5em; line-height: 1.5; width: 100%; }

/* 1px border between: cardtable and statuses table, cardtable and navbox, statuses table and navbox    */ table.cardtable + table.cardtablestatuses, table.cardtable + table.navbox, table.cardtablestatuses + table.navbox { margin-top: -1px; }