Template:Spoiler box/styles.css

.spoilerbox { margin-top: 0.6rem; border-radius: 8px; color: #72777d; background: #f8f9fa; font-size: 0.875rem; line-height: 1.4; overflow: hidden; }

.spoilerbox-header { padding: 10px 15px; background-color: rgba(0,0,0,0.02); letter-spacing: .75px; transition: background 0.2s ease; }

.spoilerbox.mw-collapsed .spoilerbox-header { background: transparent; }

.spoilerbox-content { padding: 10px 15px; }

.spoilerbox .mw-collapsible-toggle:before, .spoilerbox .mw-collapsible-toggle:after { content: none; }

.spoilerbox .mw-collapsible-text { display: block; padding: 10px 15px; color: #72777d; background: rgba(0,0,0,0.02); }

.spoilerbox .mw-collapsible-text:hover { background: rgba(0,0,0,0.03); }

.spoilerbox .mw-collapsible-text:active { background: rgba(0,0,0,0.05); }

/* Dark mode */ @media (prefers-color-scheme: dark) { .spoilerbox { background: #1d2129; color: #a0a1a5; }   .spoilerbox-header { background-color: rgba(255,255,255,0.02); }   .spoilerbox .mw-collapsible-text { padding: 10px 20px; color: #a0a1a5; background: rgba(255,255,255,0.04); }	.spoilerbox .mw-collapsible-text:hover { background: rgba(255,255,255,0.05); }	.spoilerbox .mw-collapsible-text:active { background: rgba(255,255,255,0.02); } }