Predefinição:Caixa/styles.css

/* =========================================================
   SPLIXMMO WIKI
   CAIXAS DE CONTEÚDO
   Aviso / Dica / Importante / Recompensa
   ========================================================= */

.splix-box {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);

	margin: 20px 0;

	background: #ffffff;

	border: 1px solid #dcebf3;
	border-radius: 14px;

	overflow: hidden;

	box-shadow:
		0 6px 20px rgba(62, 112, 148, 0.07);
}


/* Remove interferências do parser */

.splix-box p {
	margin-top: 0;
}

.splix-box p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   ÍCONE
   ========================================================= */

.splix-box-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	min-height: 100%;

	font-size: 18px;
	font-weight: 900;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.splix-box-content {
	padding: 13px 16px;
}

.splix-box-title {
	margin-bottom: 4px;

	font-size: 13px;
	font-weight: 900;

	letter-spacing: 0.03em;
}

.splix-box-text {
	color: #4e677c;

	font-size: 13.5px;
	line-height: 1.55;
}

.splix-box-text a {
	font-weight: 700;
}


/* =========================================================
   AVISO
   ========================================================= */

.splix-box-aviso {
	border-color: #cfe8f5;
}

.splix-box-aviso .splix-box-icon {
	background:
		linear-gradient(
			180deg,
			#dff5ff,
			#edfaff
		);

	color: #259ee8;
}

.splix-box-aviso .splix-box-title {
	color: #287aa8;
}


/* =========================================================
   DICA
   ========================================================= */

.splix-box-dica {
	border-color: #d3eee0;
}

.splix-box-dica .splix-box-icon {
	background:
		linear-gradient(
			180deg,
			#e2f9ec,
			#effcf5
		);

	color: #36a879;
}

.splix-box-dica .splix-box-title {
	color: #348164;
}


/* =========================================================
   IMPORTANTE
   ========================================================= */

.splix-box-importante {
	border-color: #f3d7d3;
}

.splix-box-importante .splix-box-icon {
	background:
		linear-gradient(
			180deg,
			#fff0ee,
			#fff8f7
		);

	color: #e66f66;
}

.splix-box-importante .splix-box-title {
	color: #ba5e58;
}


/* =========================================================
   RECOMPENSA
   ========================================================= */

.splix-box-recompensa {
	border-color: #f1e2b9;
}

.splix-box-recompensa .splix-box-icon {
	background:
		linear-gradient(
			180deg,
			#fff4cf,
			#fffaf0
		);

	color: #d79b26;
}

.splix-box-recompensa .splix-box-title {
	color: #a97920;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 720px) {

	.splix-box {
		grid-template-columns:
			38px minmax(0, 1fr);
	}

	.splix-box-content {
		padding:
			12px 13px;
	}

}