Template:Campeao/styles.css - Revision history

WikiSysop: Paineis de Requisitos e Recompensas com a mesma altura: align-items stretch no cp-split

2026-09-12T20:29:34Z

Paineis de Requisitos e Recompensas com a mesma altura: align-items stretch no cp-split

← Older revision		Revision as of 16:29, 12 September 2026
Line 134:		Line 134:

	/* --- Painéis -------------------------------------------------------------- */		/* --- Painéis -------------------------------------------------------------- */
			/* stretch, nao flex-start: os dois paineis fecham na mesma altura e a base
			da linha fica reta. Com flex-start cada um tomava a altura do proprio
			conteudo (Requisitos 188px contra Recompensas 322px) e a pagina ficava
			com um degrau no meio. */
	.cp-split {		.cp-split {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 14px;		gap: 14px;
	align-items: ~~flex-start~~;		align-items: stretch;
	}		}

2026-09-12T20:13:56Z

Corrige a faixa de stats no celular: virava grade e depois linha, em vez de os valores se encostarem sem separador

@@ Line 363: / Line 363: @@
 	.cp-head {
 		gap: 14px;
+	}
 	.cp-stat {
-		padding: 4px 0;
+		padding: 0;
 		border-left: 0;
+	}
@@ Line 372: / Line 381: @@
 	.cp-title {
 		font-size: 24px;
+	}
+}

2026-09-12T19:24:54Z

Cabecalho da ficha sai da caixa: o contraste com os paineis e o que destaca os blocos

← Older revision		Revision as of 15:24, 12 September 2026
Line 13:		Line 13:

	/* --- Cabeçalho ----------------------------------------------------------- */		/* --- Cabeçalho ----------------------------------------------------------- */
			/* O cabecalho fica solto sobre a pagina, sem caixa. E o contraste com ele
			que faz os paineis abaixo lerem como blocos destacados; se tudo for caixa,
			nada e caixa. */
	.cp-head {		.cp-head {
	display: flex;		display: flex;
Line 18:		Line 21:
	gap: 22px;		gap: 22px;
	align-items: flex-start;		align-items: flex-start;
	padding: ~~20px~~;		padding: 4px 0 18px;
	border: ~~1px solid #c5d0da~~;		border: 0;
	background: ~~#ecf0f4~~;		background: transparent;
	}		}

Line 530:		Line 533:
	sem transformar tudo em bolha.		sem transformar tudo em bolha.
	-------------------------------------------------------------------------- */		-------------------------------------------------------------------------- */
	~~.cp-head,~~
	.cp-panel {		.cp-panel {
	border-radius: 12px;		border-radius: 12px;
Line 637:		Line 639:
	.cp-boss[data-tema="escuro"] {		.cp-boss[data-tema="escuro"] {
	color: #e3eaf2;		color: #e3eaf2;
	}

	~~.cp-boss[data-tema="escuro"] .cp-head {~~
	~~border: 1px solid #3b4551;~~
	~~background: #222831;~~
	}		}

2026-09-12T19:21:05Z

Estado ativo vira lavagem translucida; Hard em vermelho; contador de item pendurado e limpo

@@ Line 233: / Line 233: @@
+}
 .cp-item-qty {
 	position: absolute;
-	right: 0;
+	bottom: -9px;
-	bottom: 0;
+	left: 50%;
-	padding: 0 4px;
+	transform: translateX(-50%);
-	background: #16293a;
+	padding: 1px 5px;
-	color: #ecf0f4;
+	background: rgba(0, 0, 0, 0.75);
 	font-size: 11px;
 	font-weight: bold;
-	line-height: 1.5;
+	line-height: 1.45;
+}
@@ Line 560: / Line 571: @@
 .cp-item-qty {
 	border-radius: 4px 0 4px 0;
+}
@@ Line 653: / Line 724: @@
 	border: 1px solid #3b4551;
 	background: #2b323c;
+}

2026-09-12T19:16:02Z

Escala de arredondamento da referencia: 4px em icone, 6 em midia, 8 em etiqueta, 10 em controle, 12 em painel

@@ Line 511: / Line 511: @@
 		flex-basis: 100%;
+	}
+}

2026-09-12T19:12:57Z

Superficies passam a usar a paleta cinza-azulada medida na referencia

2026-09-12T19:11:00Z

Legenda do painel vira caixa com borda propria, destacada do painel e da pagina

← Older revision		Revision as of 15:11, 12 September 2026
Line 154:		Line 154:

	/* O título sobre a borda é o que dá cara de ficha, e não de card */		/* O título sobre a borda é o que dá cara de ficha, e não de card */
			/* A legenda e uma caixa propria encaixada na borda do painel, nao apenas
			texto com fundo. E o que faz ela se destacar tanto do painel quanto da
			pagina, em vez de sumir na emenda entre os dois. */
	.cp-panel-title {		.cp-panel-title {
	position: absolute;		position: absolute;
	top: -~~11px~~;		top: -13px;
	left: 14px;		left: 14px;
	margin: 0;		margin: 0;
	padding: ~~0 10px~~;		padding: 3px 12px;
	border: 0;		border: 1px solid #b3dbeb;
			border-radius: 2px;
	background: #ffffff;		background: #ffffff;
	color: #16293a;		color: #16293a;
	font-family: inherit;		font-family: inherit;
	font-size: ~~15px~~;		font-size: 14px;
	font-weight: bold;		font-weight: bold;
			line-height: 1.4;
	}		}

Line 573:		Line 578:

	.cp-boss[data-tema="escuro"] .cp-panel-title {		.cp-boss[data-tema="escuro"] .cp-panel-title {
			border: 1px solid #4a5b6f;
	background: #1e242e;		background: #1e242e;
	color: #e3eaf2;		color: #e3eaf2;

2026-09-12T19:07:34Z

Painel com superficie propria; seletor de habilidade em quadrados; video em bloco preto

@@ Line 146: / Line 146: @@
 	position: relative;
 	margin: 0 0 14px;
-	padding: 22px 18px 18px;
+	padding: 26px 18px 18px;
-	border: 1px solid #d5eaf3;
+	border: 1px solid #b3dbeb;
-	background: #ffffff;
+	/* superficie propria: e o que faz cada painel ler como um bloco separado,
+}
@@ Line 436: / Line 438: @@
 		flex: 1 1 auto;
 		text-align: center;
+	}
+}
@@ Line 499: / Line 568: @@
 .cp-boss[data-tema="escuro"] .cp-panel {
-	border: 1px solid #36414d;
+	border: 1px solid #4a5b6f;
-	background: #1e242e;
+	background: #252c39;
+}
@@ Line 628: / Line 697: @@
 .cp-boss[data-tema="escuro"] .cp-empty {
 	color: #a0b0bd;
+}

2026-09-12T06:22:46Z

Acrescenta o CSS do painel de habilidades, na paleta azul

@@ Line 351: / Line 351: @@
 	.cp-title {
 		font-size: 24px;
+	}
+}
@@ Line 495: / Line 580: @@
 	border: 1px solid #36414d;
 	background: #252c39;
 	color: #a0b0bd;
+}

2026-09-12T06:12:44Z

Ficha de Campeao: acento roxo -> azul claro, temas claro e escuro (gerado por gen_css.py)