Module:Quotation/styles.css

/**
 * Module:Quotation/styles.css
 * TemplateStyles for blockquotes, pull quotes, and poetry.
 *
 * INSTALLATION:
 * 1. Create page: Module:Quotation/styles.css
 * 2. Paste this entire file
 * 3. Mark as sanitized CSS (Content model: Sanitized CSS)
 *
 * DARK MODE:
 * Uses [data-theme="dark"] selector to match wiki's dark mode toggle.
 */

/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

.quote-block {
    margin: 1em 2em;
    padding: 0.5em 1em;
    border-left: 3px solid #c8ccd1;
    background-color: transparent;
}

.quote-text {
    font-size: 1em;
    line-height: 1.6;
}

.quote-attribution {
    margin-top: 0.5em;
    text-align: right;
    font-size: 0.9em;
    color: #54595d;
}

/* ==========================================================================
   QUOTE BOX (Pull Quote)
   ========================================================================== */

.quote-box {
    margin: 0.5em;
    padding: 0.8em 1em;
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    font-size: 0.95em;
}

.quote-box-right {
    float: right;
    clear: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

.quote-box-left {
    float: left;
    clear: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.quote-box-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.quote-box-none {
    float: none;
}

.quote-box-text {
    font-style: italic;
    line-height: 1.5;
}

.quote-box-attribution {
    margin-top: 0.5em;
    text-align: right;
    font-size: 0.9em;
    color: #54595d;
}

/* ==========================================================================
   CENTERED QUOTE (Cquote)
   ========================================================================== */

.quote-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5em 2em;
    padding: 1em;
}

.quote-mark {
    font-size: 3em;
    font-family: Georgia, "Times New Roman", serif;
    color: #c8ccd1;
    line-height: 0.5;
}

.quote-mark-open {
    align-self: flex-start;
    margin-bottom: 0.2em;
}

.quote-mark-close {
    align-self: flex-end;
    margin-top: 0.2em;
}

.quote-centered-text {
    font-size: 1.1em;
    font-style: italic;
    text-align: center;
    line-height: 1.6;
    max-width: 80%;
}

.quote-centered-attribution {
    margin-top: 0.8em;
    font-size: 0.9em;
    color: #54595d;
}

/* ==========================================================================
   POEM QUOTE
   ========================================================================== */

.quote-poem {
    margin: 1em 2em;
    padding: 0.8em 1.5em;
    border-left: 3px solid #c8ccd1;
    background-color: #f8f9fa;
}

.quote-poem-left {
    text-align: left;
}

.quote-poem-center {
    text-align: center;
}

.quote-poem-right {
    text-align: right;
}

.quote-poem-text {
    font-style: italic;
    line-height: 1.8;
    white-space: pre-wrap;
}

.quote-poem-attribution {
    margin-top: 0.8em;
    text-align: right;
    font-size: 0.9em;
    color: #54595d;
}

/* ==========================================================================
   VERSE (Simple)
   ========================================================================== */

.quote-verse {
    margin: 1em 2em;
    line-height: 1.8;
    white-space: pre-wrap;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .quote-block {
    border-left-color: #72777d;
}

[data-theme="dark"] .quote-attribution,
[data-theme="dark"] .quote-box-attribution,
[data-theme="dark"] .quote-centered-attribution,
[data-theme="dark"] .quote-poem-attribution {
    color: #a2a9b1;
}

[data-theme="dark"] .quote-box {
    border-color: #72777d;
    background-color: #27292d;
}

[data-theme="dark"] .quote-mark {
    color: #72777d;
}

[data-theme="dark"] .quote-poem {
    border-left-color: #72777d;
    background-color: #27292d;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .quote-block,
    .quote-poem {
        border-left-color: #000;
        background-color: #fff;
    }

    .quote-box {
        border-color: #000;
        background-color: #fff;
        float: none;
        width: 100% !important;
    }

    .quote-attribution,
    .quote-box-attribution,
    .quote-centered-attribution,
    .quote-poem-attribution {
        color: #000;
    }

    .quote-mark {
        color: #666;
    }
}