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 */
/* Adjust width for the main left navigation container */
#mw-site-navigation {
    width: 300px; /* Increase this value (e.g., from default 200px) */
}

/* Adjust width for the overall navigation wrapper if necessary */
/* This might be needed if #mw-site-navigation alone isn't enough */
#mw-navigation {
    width: 300px; /* Make sure this matches or is slightly larger */
}

/* Ensure the Discord widget iframe itself can take up the new space */
#p-discord-widget .mw-portlet-body iframe {
    width: 100% !important; /* Make iframe fill its container */
    max-width: none !important; /* Prevent it from being constrained */
    box-sizing: border-box; /* Include padding/border in width */
}

/* You might also need to adjust the margin of the content area to prevent overlap */
#mw-content-container #mw-content-block {
    /* Default margin-left is often around 220px-230px depending on the Timeless version/config */
    /* If your sidebar is 250px, add a bit more for padding/gap, e.g., 270px */
    margin-left: 270px; /* Adjust this value */
}

/* Also check for specific rules for small screens if the above doesn't work perfectly everywhere */
@media all and ( min-width: 720px ) { /* Example breakpoint */
    #mw-site-navigation {
        width: 300px; /* Ensure width is applied at larger screen sizes */
    }
    #mw-content-container #mw-content-block {
        margin-left: 270px;
    }
}