Template:Character Panel/styles.css

.infobox-character { float: right; width: 350px; max-width: 100%; margin: 0 0 1rem 1rem; border: 1px solid var(--border-color-base); border-radius: var(--border-radius-medium, 8px); background: var(--color-surface-1); color: var(--color-base); border-collapse: separate; border-spacing: 0; overflow-wrap: anywhere; }
.infobox-character caption { padding: .6rem; font-size: 1.2rem; font-weight: 700; color: var(--color-emphasized); }
.infobox-character th, .infobox-character td { padding: .45rem .6rem; text-align: left; vertical-align: top; }
.infobox-character th { width: 35%; }
.infobox-character .infobox-character__image { text-align: center; background: #f4f4f2; }
.infobox-character img { max-width: 100%; height: auto; }
.infobox-character td { white-space: pre-line; }

/* Themed panels: a translucent tint over the skin's own surface color,
   so light and dark mode both work without any theme selectors. */
.infobox-character--crimson,
.infobox-character--azure,
.infobox-character--verdant,
.infobox-character--midnight,
.infobox-character--mekhanite {
	background: linear-gradient(var(--cp-tint), var(--cp-tint)), var(--color-surface-1);
}
.infobox-character--crimson   { --cp-tint: rgba(190, 40, 60, 0.22); }
.infobox-character--azure     { --cp-tint: rgba(50, 120, 220, 0.22); }
.infobox-character--verdant   { --cp-tint: rgba(40, 160, 90, 0.22); }
.infobox-character--midnight  { --cp-tint: rgba(120, 70, 200, 0.25); }
.infobox-character--mekhanite { --cp-tint: rgba(176, 124, 84, 0.26); }

@media (max-width: 640px) { .infobox-character { float: none; width: 100%; margin: 0 0 1rem; } }
@media print { .infobox-character { background: none; } }