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; }

/* Color themes */
.infobox-character--crimson { background: #3b1219; color: #f3e6e8; }
.infobox-character--azure   { background: #12243b; color: #e6edf5; }
.infobox-character--verdant { background: #14301f; color: #e6f3ea; }
.infobox-character--crimson caption,
.infobox-character--azure caption,
.infobox-character--verdant caption { color: inherit; }

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