MediaWiki:Timeless.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the Timeless skin */
/* --- Adjusting Timeless Sidebar Width --- */

/* 1. Target the main content block, which usually controls column layout */
#mw-content-container #mw-content-block {
    /* If it uses flexbox, adjust the flex-basis or width of its children */
    /* Timeless often uses grid or flexbox for its main layout.
       You might need to override a specific width or flex-basis for the sidebar. */
}

/* 2. Increase the width of the left navigation sidebar */
/* This is your #mw-site-navigation where the Discord widget is */
#mw-site-navigation {
    /* The default width is likely around 200px. Increase it. */
    width: 250px; /* Try 250px first, then increase if needed */
    flex-basis: 250px; /* If flexbox is used, this is often the key */
    min-width: 250px; /* Ensure it doesn't shrink below this */
}

/* 3. Adjust the main content wrapper's left margin/position to make space */
/* This ensures the content doesn't overlap the widened sidebar */
#mw-content-wrapper {
    /* Default margin-left on #mw-content-wrapper is often 220px or 230px
       when the sidebar is 200px. If you set sidebar to 250px, this needs to be
       at least 270px (250px + some padding/gap). */
    margin-left: 270px; /* Increase this by the same amount you increased the sidebar width, plus a gap */
}

/* 4. Ensure the iframe itself scales within the new sidebar width */
#p-discord-widget iframe {
    width: 100% !important; /* Make the iframe take up all available width */
    height: 300px; /* Keep your desired height */
    box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
}

/* 5. IMPORTANT: Timeless uses media queries for responsiveness.
      Ensure your changes apply at the relevant screen sizes.
      Check what min-width breakpoints are active in the Timeless default CSS. */
@media all and (min-width: 720px) { /* This is a common desktop breakpoint for Timeless */
    #mw-site-navigation {
        width: 250px;
        flex-basis: 250px;
        min-width: 250px;
    }
    #mw-content-wrapper {
        margin-left: 270px;
    }
}

/* If Timeless uses a CSS Grid for its main layout, you might need to override
   'grid-template-columns' on #mw-content-block or its parent.
   Example (check browser inspector if you see grid rules): */
/*
#mw-content-block {
    grid-template-columns: 250px auto; // Example: sidebar (250px) and content (auto)
}
*/