Difference between revisions of "MediaWiki:Gadget-Cardtable.css"

From Yugipedia
Jump to: navigation, search
(goodbye and good riddance)
(Even though it's an official colour, it contrasts poorly with page links. Increasing the lightness from 71% to 90%.)
 
(One intermediate revision by the same user not shown)
Line 308: Line 308:
  
 
.ritual-card,
 
.ritual-card,
.link-card,
+
.blue-card                    { background-color: #DDE6EE; }
.blue-card                    { background-color: #CCC0D8; }
 
 
.ritual-card .heading,
 
.ritual-card .heading,
.link-card .heading,
+
.blue-card .heading          { background-color: #538DD5; }
.blue-card .heading          { background-color: #66F; }
 
 
.ritual-card .lore,
 
.ritual-card .lore,
.link-card .lore,
+
.blue-card .lore              { border-color: #538DD5; }
.blue-card .lore              { border-color: #66F; }
+
 
 +
.link-card                    { background-color: #DDE6EE; }
 +
.link-card .heading          { background-color: #538DD5; }
 +
.link-card .lore              { border-color: #538DD5; }
 +
 
  
 
.cardtable-link .cardtable-header,
 
.cardtable-link .cardtable-header,

Latest revision as of 22:16, 4 December 2019

.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: #DDE6EE; }
.ritual-card .heading,
.blue-card .heading           { background-color: #538DD5; }
.ritual-card .lore,
.blue-card .lore              { border-color: #538DD5; }

.link-card                    { background-color: #DDE6EE; }
.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');
}