Template:Scrollable Math/styles.css

/* ============================================================
   CORE SCROLLABLE MATH CONTAINER
   ============================================================ */
.scrollable-math {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    padding: 2px 0 !important; /* tighter vertical padding */
    margin: 0 !important;

    /* remove any default styling */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   REMOVE CITIZEN BLOCK/BACKGROUND ON DIRECT CHILD DIV
   ============================================================ */
/* Citizen skins style all .mw-parser-output > div by default */
.mw-parser-output > .scrollable-math {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================================
   REMOVE INTERNAL BACKGROUNDS / BORDERS (Math extension)
   ============================================================ */
.scrollable-math *,
.scrollable-math *::before,
.scrollable-math *::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   MULTILINE MATH FORMATTING
   ============================================================ */
.scrollable-math math,
.scrollable-math .mwe-math-element {
    display: block;
    white-space: normal; /* allow proper wrapping */
}

/* Wide formulas scroll instead of shrinking */
.scrollable-math .mwe-math-element {
    min-width: max-content;
}

/* ============================================================
   *** REDUCE VERTICAL SPACING BETWEEN FORMULAS ***
   ============================================================ */
.scrollable-math .mwe-math-element {
    margin-top: 0.25em !important;    /* tight vertical spacing */
    margin-bottom: 0.25em !important;
    line-height: 1.1 !important;       /* more compact lines */
}

.scrollable-math math {
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
}

/* ============================================================
   REMOVE EMPTY PARAGRAPHS BEFORE/AFTER TEMPLATE
   (MediaWiki inserts <p></p> blocks automatically)
   ============================================================ */
p + .scrollable-math,
.scrollable-math + p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important; /* collapse whitespace paragraphs */
}

/* Restore normal text sizing inside the math block */
.scrollable-math,
.scrollable-math * {
    font-size: inherit !important;
    line-height: normal !important;
}