MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 19:19, 28 July 2025

/* --- Adjusting Timeless Sidebar Width and Gap --- */

/* 1. Sidebar Width - Keep this value the same as whatever made your Discord widget fit */
#mw-site-navigation {
    width: 250px; /* Adjust this to the exact value that correctly displays the widget */
    flex-basis: 250px; /* Keep this in sync with width if flexbox is used */
    min-width: 250px; /* Keep this in sync */
}

/* 2. Content Wrapper Margin - THIS IS THE KEY TO FIXING THE GAP */
#mw-content-wrapper {
    /* Current value is likely 270px (from our previous suggestion).
       You need to reduce this value.
       If your sidebar is 250px wide:
       - Try 255px (if no padding/gap needed)
       - Try 260px (if small gap needed)
       - Try 265px (if slightly more gap needed)
       The exact value depends on Timeless's internal padding/margins.
    */
    margin-left: 260px; /* <<< START HERE, THEN TWEAK WITH F12 */
}

/* 3. Ensure the iframe itself scales within the new sidebar width */
#p-discord-widget iframe {
    width: 100% !important;
    /* height: 300px; - Keep your desired height, no change needed here. */
    box-sizing: border-box;
}

/* 4. Responsive adjustments (important for Timeless) */
@media all and (min-width: 720px) { /* Adjust breakpoint if your site uses a different one */
    #mw-site-navigation {
        width: 250px; /* Keep in sync */
        flex-basis: 250px;
        min-width: 250px;
    }
    #mw-content-wrapper {
        margin-left: 0.1em; /* Keep in sync with the value above */
    }
}

/* You might also need to ensure no max-width is interfering with the iframe's display */
#p-discord-widget {
    max-width: none; /* Remove any potential max-width on the portlet itself */
}