MediaWiki:Tibiarpgbrasil.css

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Internet Explorer/Edge: PressioneCtrl enquanto clica Recarregar, ou Pressione Ctrl-F5
• Opera: Pressione Ctrl-F5.

/*
 * Conteúdo para a página MediaWiki:Tibiarpgbrasil.css
 * (fonte versionada em skins/TibiaRPGBrasil/wiki-pages/).
 *
 * Carrega SOMENTE na skin TibiaRPGBrasil e DEPOIS do MediaWiki:Common.css.
 * Adapta à paleta da skin os estilos próprios da wiki (infobox, tabelas DPL,
 * cabeçalhos bgcolor="#CEDFF2", galerias), sem mudar nada no Vector.
 * As cores vêm das variáveis da skin (--tr-*).
 */

/* Infobox: cabeçalho vinho com filete dourado no lugar do degradê vermelho */
.infobox-header {
	background: linear-gradient( 120deg, var( --tr-wine-dark ) 0%, var( --tr-wine ) 55%, var( --tr-wine-light ) 100% );
	border-bottom: 2px solid var( --tr-gold );
	color: #fff;
	font-family: var( --tr-font-display );
	letter-spacing: 0.03em;
}

.infobox,
.infobox-main,
.infobox-sidebar {
	background-color: rgba( 255, 252, 243, 0.6 );
	box-shadow: 0 0 0 1px var( --tr-parchment-edge ), 0 2px 6px rgba( 90, 60, 20, 0.15 );
}

.infobox-main .infobox-separator {
	border-top-color: var( --tr-parchment-edge );
}

/* Tabelas de dados: um padrão só (wikitable, listas DPL e bestiário).
 * Corpo branco (não some no pergaminho), cabeçalho pergaminho com texto vinho, bordas douradas.
 * Fica no MediaWiki:Tibiarpgbrasil.css, que carrega depois do CSS do core e do Common.css:
 * com a mesma especificidade, vence os dois (o .wikitable do content.less da skin perde para o core). */
.wikitable,
table#tabelaDPL,
table#tabelaBestiario {
	border: 1px solid var( --tr-parchment-edge );
	border-collapse: collapse;
	background-color: #fffdf8;
	color: var( --tr-ink );
	box-shadow: 0 1px 3px rgba( 90, 60, 20, 0.12 );
}

.wikitable > tr > th,
.wikitable > * > tr > th,
table#tabelaDPL th,
table#tabelaBestiario th {
	border: 1px solid var( --tr-parchment-edge );
	background-color: var( --tr-parchment-dark );
	color: var( --tr-wine-dark );
}

.wikitable > tr > td,
.wikitable > * > tr > td,
table#tabelaDPL tr td,
table#tabelaDPL td:first-child,
table#tabelaBestiario tr td,
table#tabelaBestiario td:first-child {
	border: 1px solid #e4d5af;
	background-color: #fffdf8;
}

.wikitable > * > tr:hover > td,
table#tabelaDPL tr:hover td,
table#tabelaBestiario tr:hover td {
	background-color: #fbf3df;
}

/* Linha com rowspan="2" + a linha seguinte formam um grupo (ex.: outfit Feminino + Masculino):
 * o destaque pega as duas, passe o mouse em qualquer uma. Regra separada: sem suporte a :has(), só ela é ignorada. */
.wikitable > * > tr:has( > td[ rowspan="2" ] ):hover + tr > td,
.wikitable > * > tr:has( > td[ rowspan="2" ] ):has( + tr:hover ) > td,
table#tabelaDPL tr:has( > td[ rowspan="2" ] ):hover + tr > td,
table#tabelaDPL tr:has( > td[ rowspan="2" ] ):has( + tr:hover ) > td,
table#tabelaBestiario tr:has( > td[ rowspan="2" ] ):hover + tr > td,
table#tabelaBestiario tr:has( > td[ rowspan="2" ] ):has( + tr:hover ) > td {
	background-color: #fbf3df;
}

/* Cabeçalhos com bgcolor="#CEDFF2" (padrão antigo dos templates, ex.: compra/venda de itens) */
th[ bgcolor="#CEDFF2" i ],
td[ bgcolor="#CEDFF2" i ] {
	background-color: var( --tr-parchment-dark );
	color: var( --tr-wine-dark );
}

#TabelaValores {
	border-color: var( --tr-parchment-edge ) !important; /* a cor vem de style="" no template */
}

#TabelaValores th,
#TabelaValores td {
	border-color: var( --tr-parchment-edge );
}

/* Galerias de pets/outfits */
.pet-outfit-gallery .gallerybox {
	border-color: var( --tr-wine );
	background-color: var( --tr-parchment-light );
}

.pet-outfit-gallery .gallerytext {
	border-color: var( --tr-parchment-edge );
	background-color: var( --tr-parchment );
}

/* Celular: infobox em coluna única */
@media ( max-width: 719px ) {
	.infobox-holder {
		flex-wrap: wrap;
	}

	.infobox-holder > div:first-child {
		margin-right: 0;
	}

	.infobox-holder > div:nth-child( 2 ) {
		flex: 1 1 100%;
		width: 100%;
		margin-top: 10px;
	}

	.infobox-main > tbody > tr > td:first-child {
		width: auto;
		min-width: 0;
	}
}