Template:TranscriptBox/styles.css

/* ================================================
   TranscriptBox — TemplateStyles
   Theming via Citizen skin CSS custom properties.
   Requires Extension:TemplateStylesExtender to use
   CSS variables from the Citizen skin.
   ================================================ */

.transcript-box {
    height: 50vh;
    overflow-y: scroll;
    border: 1px solid var(--border-color-base);
    padding: 10px;
    border-radius: 8px;
    line-height: 1.6;
    background-color: var(--color-surface-1);
    color: var(--color-base);
}

/* ================================================
   Dark mode overrides
   ================================================ */

/* Dark mode */
.skin-theme-clientpref-night .transcript-box {
    background-color: var(--color-surface-2);
}

/* Pure black mode */
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 .transcript-box {
    background-color: #000;
}

/* Automatic (follows OS preference) */
@media ( prefers-color-scheme: dark ) {
    .skin-theme-clientpref-os .transcript-box {
        background-color: var(--color-surface-2);
    }
}