SoS Ledger

MediaWiki:Timeless.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the Timeless skin */
/* All CSS here will be loaded for users of the Timeless skin */
/* Adjust width for the main left navigation container */
/* --- Adjusting Timeless Sidebar Width --- */
#mw-site-navigation {
 
     width: 300px; /* Increase this value (e.g., from default 200px) */
/* 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. */
}
}


/* Adjust width for the overall navigation wrapper if necessary */
/* 2. Increase the width of the left navigation sidebar */
/* This might be needed if #mw-site-navigation alone isn't enough */
/* This is your #mw-site-navigation where the Discord widget is */
#mw-navigation {
#mw-site-navigation {
     width: 300px; /* Make sure this matches or is slightly larger */
    /* 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 */
}
}


/* Ensure the Discord widget iframe itself can take up the new space */
/* 3. Adjust the main content wrapper's left margin/position to make space */
#p-discord-widget .mw-portlet-body iframe {
/* This ensures the content doesn't overlap the widened sidebar */
     width: 100% !important; /* Make iframe fill its container */
#mw-content-wrapper {
    max-width: none !important; /* Prevent it from being constrained */
     /* Default margin-left on #mw-content-wrapper is often 220px or 230px
     box-sizing: border-box; /* Include padding/border in width */
      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 */
}
}


/* You might also need to adjust the margin of the content area to prevent overlap */
/* 4. Ensure the iframe itself scales within the new sidebar width */
#mw-content-container #mw-content-block {
#p-discord-widget iframe {
     /* Default margin-left is often around 220px-230px depending on the Timeless version/config */
     width: 100% !important; /* Make the iframe take up all available width */
     /* If your sidebar is 250px, add a bit more for padding/gap, e.g., 270px */
     height: 300px; /* Keep your desired height */
     margin-left: 270px; /* Adjust this value */
     box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
}
}


/* Also check for specific rules for small screens if the above doesn't work perfectly everywhere */
/* 5. IMPORTANT: Timeless uses media queries for responsiveness.
@media all and ( min-width: 720px ) { /* Example breakpoint */
      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 {
     #mw-site-navigation {
         width: 300px; /* Ensure width is applied at larger screen sizes */
         width: 250px;
        flex-basis: 250px;
        min-width: 250px;
     }
     }
     #mw-content-container #mw-content-block {
     #mw-content-wrapper {
         margin-left: 270px;
         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)
}
*/
Retrieved from "https://sosledger.com/w/MediaWiki:Timeless.css"