Template:Character Panel/styles.css: Difference between revisions

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

/* Themed panels: use the variables set below */
.infobox-character--crimson,
.infobox-character--azure,
.infobox-character--verdant,
.infobox-character--midnight { background: var(--cp-bg); color: var(--cp-fg); }
.infobox-character--crimson caption,
.infobox-character--azure caption,
.infobox-character--verdant caption,
.infobox-character--midnight caption { color: inherit; }

/* Light mode (default) */
.infobox-character--crimson  { --cp-bg: #f6dfe2; --cp-fg: #3b1219; }
.infobox-character--azure    { --cp-bg: #dce8f6; --cp-fg: #12243b; }
.infobox-character--verdant  { --cp-bg: #dcf0e3; --cp-fg: #14301f; }
.infobox-character--midnight { --cp-bg: #e9e0f5; --cp-fg: #261a3d; }

/* Dark mode: reader chose dark manually */
html.skin-theme-clientpref-night .infobox-character--crimson  { --cp-bg: #3b1219; --cp-fg: #f3e6e8; }
html.skin-theme-clientpref-night .infobox-character--azure    { --cp-bg: #12243b; --cp-fg: #e6edf5; }
html.skin-theme-clientpref-night .infobox-character--verdant  { --cp-bg: #14301f; --cp-fg: #e6f3ea; }
html.skin-theme-clientpref-night .infobox-character--midnight { --cp-bg: #261a3d; --cp-fg: #ece6f5; }

/* Dark mode: reader follows their OS setting */
@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox-character--crimson  { --cp-bg: #3b1219; --cp-fg: #f3e6e8; }}